import React from "react";
import './TodoHeader.css';
//1. 导入 useDispatch
import { useDispatch } from "react-redux";
import { asyncReqAddTodo } from "../../redux/reducers/todoReducer";

export default function TodoHeader() {
  //2. 调用函数获得 dispatch 函数
  let dispatch = useDispatch();

  //声明事件回调
  let keyup = (e) => {
    //检测按下的按键是否为回车
    if(e.keyCode === 13){
      dispatch(asyncReqAddTodo(e.target.value));
    }
  }

  return (
    <div className="todo-header">
      <input type="text" onKeyUp={keyup} placeholder="请输入你的任务名称，按回车键确认" />
    </div>
  );
}
